<!-- 发布职位初始化() -->
<script setup>
import { useUserStore } from '@/stores/user.js'
import { ElMessage, ElNotification } from 'element-plus'
import router from '@/router/index.js'
import { reactive, ref, nextTick, onMounted } from 'vue'
import http_login from '@/api/login.js'
import http_posts from '@/api/posts.js'
import http_location from '@/api/location.js'
import http_company from '@/api/company.js'
import http_search from '@/api/search.js'

const userStore = useUserStore()
const userInfo = userStore.userInfo // 获得用户信息
const dialogVisible = ref(false) //控制头像弹出层
const avatarList = ref([
  'http://121.40.171.110:9000/client-avatar/default_avatar_1.png',
  'http://121.40.171.110:9000/client-avatar/default_avatar_2.png',
  'http://121.40.171.110:9000/client-avatar/default_avatar_3.png',
  'http://121.40.171.110:9000/client-avatar/default_avatar_4.png',
  'http://121.40.171.110:9000/client-avatar/default_avatar_5.png',
  'http://121.40.171.110:9000/client-avatar/default_avatar_6.png',
  'http://121.40.171.110:9000/client-avatar/default_avatar_7.png',
  'http://121.40.171.110:9000/client-avatar/default_avatar_8.png'
]) //默认头像列表
const formData = reactive({
  username: userInfo.username,
  duties: '',
  company: ''
}) //表单数据
const postsFormData = ref({
  companyName: '', //公司
  postsType: '', //招聘类型
  name: '', //职位名称
  description: '', //职位描述
  categoryId: '', //职位类型
  workExperience: '', //工作经验
  academicQualifications: '', //学历
  salary: '', //薪资范围  1k-2k 13薪
  min: '',
  max: '',
  month: '',
  postsKey: [] //职位关键词
})
const workExperience = ref(['1年以内', '1-3年', '3-5年', '5-10年', '10年以上']) //工作经验
const academicQualifications = ref([
  '无学历要求',
  '高中',
  '大专',
  '本科',
  '研究生',
  '博士'
]) //学历
const minSalary = ref([
  '1k',
  '2k',
  '3k',
  '4k',
  '5k',
  '6k',
  '7k',
  '8k',
  '9k',
  '10k',
  '11k',
  '12k',
  '13k',
  '14k',
  '15k',
  '16k',
  '17k',
  '18k',
  '19k',
  '20k',
  '21k',
  '22k',
  '23k',
  '24k',
  '25k',
  '26k',
  '27k',
  '28k',
  '29k',
  '30k',
  '35k',
  '40k',
  '45k',
  '50k',
  '55k',
  '60k',
  '65k',
  '70k',
  '75k',
  '80k',
  '85k',
  '90k',
  '95k',
  '100k',
  '110k',
  '120k',
  '130k',
  '140k',
  '150k',
  '160k',
  '170k',
  '180k',
  '190k',
  '200k',
  '210k',
  '220k',
  '230k',
  '240k',
  '250k'
]) //薪资最小值
const maxSalary = ref([]) //薪资最大值
const month = ref([
  '12月',
  '13月',
  '14月',
  '15月',
  '16月',
  '17月',
  '18月',
  '19月',
  '20月',
  '21月',
  '22月',
  '23月',
  '24月'
]) //领取薪资月数
const postsTypeList = ref(['社招', '应届校园招聘', '实习生招聘']) //招聘类型
const props = ref({
  value: 'categoryId',
  label: 'name'
}) //职位类型的属性
const postsList = ref([]) //职位分类列表
const avatarActive = ref('') //当前选中的头像下表
const avatarImage = ref('') //当前选中的头像地址
const step = ref(1) //步骤

const rules = reactive({
  //发布职位表单验证规则
  companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
  postsType: [
    {
      required: true,
      message: '请选择招聘类型',
      trigger: 'change'
    }
  ],
  categoryId: [
    {
      required: true,
      message: '请选择职位类型',
      trigger: 'change'
    }
  ],
  name: [
    {
      required: true,
      message: '请输入职位名称',
      trigger: 'blur'
    }
  ],
  description: [
    {
      required: true,
      message: '请输入职位描述',
      trigger: 'blur'
    },
    {
      pattern: /^.{10,5000}$/,
      message: '请输入10-5000个字符',
      trigger: 'blur'
    }
  ]
})

const inputValue = ref('')
const inputVisible = ref(false)
const InputRef = ref()

// ------------------------职位关键词------------------------------
const handleClose = (tag) => {
  postsFormData.value.postsKey.splice(
    postsFormData.value.postsKey.indexOf(tag),
    1
  )
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value.input.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    postsFormData.value.postsKey.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}
// -----------------------------------------------------------------

// 选择默认头像
const selectAvatar = (url, index) => {
  avatarActive.value = index
  avatarImage.value = url
}

// 上传头像前的检查
const beforeUpload = (file) => {
  const isJPG = file.type === 'image/jpeg'
  const isPNG = file.type === 'image/png'
  const isBMP = file.type === 'image/bmp'
  const isLt10M = file.size / 1024 / 1024 < 10

  if (!isJPG && !isPNG && !isBMP) {
    ElMessage.error('上传图片只能是 JPG/PNG/BMP 格式!')
    return false
  }
  if (!isLt10M) {
    ElMessage.error('上传图片大小不能超过 10MB!')
    return false
  }
  // 给请求头添加参数Authorization为token
  const formData = new FormData()
  formData.append('file', file)
  formData.append('Authorization', userStore.token)

  // 发送请求
  fetch('/api/v1/client/auth/uploadAvatar', {
    method: 'POST',
    body: formData
  })
    .then((response) => response.json())
    .then(() => {
      ElMessage({
        message: '头像上传成功，请等待审核',
        type: 'success'
      })
      dialogVisible.value = false
    })
    .catch((error) => {
      ElMessage.error(error)
    })
  return false
}

// 选择了默认头像
const selectDefaultAvatar = async () => {
  if (avatarActive.value === '') {
    ElMessage.error('请选择头像后再确认')
  } else {
    userInfo.avatarImage = avatarImage.value
    const result = await http_login.updateAvatar(userInfo)
    if (result.code === 200) {
      // 修改本地的userInfo
      userStore.setUserInfo(userInfo)
      ElMessage({
        message: '头像修改成功',
        type: 'success'
      })
      dialogVisible.value = false
    } else {
      ElMessage.error(result.message)
    }
  }
}

// 显示头像上传框
const showDialogForm = () => {
  dialogVisible.value = true
}

// 退出
const logout = () => {
  userStore.setUserInfo({})
  userStore.removeToken()
  ElMessage({
    message: '退出成功',
    type: 'success'
  })
  router.push('/')
}

// 点击的下一步
const postsForm = ref()
const authVisivle = ref(false) //企业认证对话框
const enterpriseAuthenticationCode = ref('') //企业认证码
const nextStep = async () => {
  if (step.value === 1) {
    if (formData.duties === '') {
      ElMessage.error('请输入职务')
      return
    }
    const result = await http_login.addDuties(formData.duties)
    if (result.code === 200) {
      step.value = step.value + 1
    }
  } else if (step.value === 2) {
    if (formData.company === '') {
      ElMessage.error('请输入职务')
      return
    }
    const result = await http_login.addCompany(formData.company)
    if (result.code === 200) {
      step.value = step.value + 1
      postsFormData.value.companyName = formData.company
      const result1 = await http_posts.getCategoryList()
      if (result1.code === 200) {
        postsList.value = result1.data
      }
    }
  } else if (step.value === 3) {
    await postsForm.value.validate() //进行表单的验证码
    if (
      postsFormData.value.workExperience === '' ||
      postsFormData.value.academicQualifications === ''
    ) {
      ElMessage.error('请选择学历和经验')
      return
    }
    if (
      postsFormData.value.min === '' ||
      postsFormData.value.max === '' ||
      postsFormData.value.month === ''
    ) {
      ElMessage.error('请选择薪资范围')
      return
    }
    if (
      mapform.value.address === '' ||
      mapform.value.detailedAddress === '' ||
      mapform.value.location === ''
    ) {
      ElMessage.error('请选择当前工作地点')
      return
    }
    // 整合数据
    const posts = ref({
      // postsId: '', 自动生成uuid
      categoryId:
        postsFormData.value.categoryId[
          postsFormData.value.categoryId.length - 1
        ],
      publisherId: userStore.userInfo.userId,
      name: postsFormData.value.name,
      city: mapform.value.city,
      postsType: postsFormData.value.postsType,
      location: mapform.value.address + mapform.value.detailedAddress,
      position: mapform.value.location,
      salary: `(${postsFormData.value.min}-${postsFormData.value.max})*${postsFormData.value.month}`,
      billingMethod: 4,
      workExperience: postsFormData.value.workExperience,
      academicQualifications: postsFormData.value.academicQualifications,
      welfare: '[]',
      postsKey: JSON.stringify(postsFormData.value.postsKey),
      description: postsFormData.value.description,
      // companyId: '', 通过userId验证是否通过了认证，如果认证了就后端自动添加
      companyName: postsFormData.value.companyName
      // status:'', //后端填写
      // createTime: '', mysql自动生成
      // updateTime: '' mysql自动生成
    })
    const result = await http_posts.savePosts(posts.value)
    if (result.code === 200) {
      //表示用户认证了，直接发布成功，跳转到/home
      ElMessage({
        message: '职位发布成功,请等待审核结果',
        type: 'success'
      })
      router.push('/')
    } else if (result.code === 202) {
      //用户还未获得公司认证
      ElNotification({
        title: '发布职位',
        message:
          '发布的职位已保存至草稿，当前用户还未被公司认证，请输入企业认证码进行认证。认证完成之后自动提交审核',
        type: 'warning'
      })
      authVisivle.value = true
    } else {
      ElMessage.error(result.message)
    }
  }
}

// 关闭了认证对话框
const authClose = async () => {
  const result = await http_company.authUser(enterpriseAuthenticationCode.value)
  if (result.code === 200) {
    authVisivle.value = false
    ElMessage({
      message: '认证成功！职位已自动发布',
      type: 'success'
    })
    router.push('/')
  } else {
    ElMessage.error(result.message)
    router.push('/')
  }
}

// 服务端返回查找公司的数据
let timeout = ref()
const querySearchAsync = async (queryString, cb) => {
  const results = await http_search.getAllByName(queryString)
  if (results.code === 200) {
    const company = results.data.company
    const companyNamelist = []
    for (let i = 0; i < company.length; i++) {
      companyNamelist.push({
        value: company[i][1]
      })
    }
    clearTimeout(timeout)
    timeout.value = setTimeout(() => {
      cb(companyNamelist)
    }, 1000 * Math.random())
  }
}

// 选择薪资
const salaryChange = (value) => {
  let index = 0
  maxSalary.value = []
  for (let i = 0; i < minSalary.value.length; i++) {
    if (value === minSalary.value[i]) {
      index = i
      break
    }
  }
  for (let i = index; i < index + 5; i++) {
    if (minSalary.value[i] === undefined) {
      break
    }
    maxSalary.value.push(minSalary.value[i])
  }
  if (index > minSalary.value.length - 5) {
    maxSalary.value.push('260k')
  }
  postsFormData.value.max = maxSalary.value[1]
  postsFormData.value.month = month.value[0]
}

// --------------------地图-------------------------

const mapVisible = ref(false) //添加地址弹出层是否可见

const mapform = ref({
  address: '', // 粗滤地址,省+市+ 区+目标建筑
  detailedAddress: '', // 详细地址 楼层+门牌号
  location: '', //经纬度
  city: '',
  url: ''
}) //添加地址的数据

// 点击获得当前地址
const addAddress = async () => {
  mapVisible.value = true
}

// 获得当前地址的图片缩略图
const setLocation = async () => {
  // 浙江省宁波市海曙区宁波工程学院翠柏校区
  if (mapform.value.address === '') {
    ElMessage.error('请填写正确的地址 ')
    return
  }
  const result1 = await http_location.addressToLocation(mapform.value.address)
  if (result1.data.status === '1') {
    mapform.value.city = result1.data.geocodes[0].city
    const location = result1.data.geocodes[0].location //获得经纬度
    mapform.value.location = location
    // const result2 = await http_location.locationToMap(location)
    // if (result2.status === 200) {
    //   console.log(result2.data)
    // }
    addressToLocation(location)
  } else {
    ElMessage.error(result1.data.info)
  }
}

// 获得高德地图提供的缩略图
const addressToLocation = (location) => {
  // 假设您已经通过Fetch API获取到了二进制数据，并将其存储在变量response中
  const key = '1384c2854dd7fad97b20b9e115717e8f' //高德地图的key
  const params = `location=${location}&size=600*240&markers=large,,我:${location}&key=${key}&zoom=17`
  var xhr = new XMLHttpRequest() // 创建XMLHttpRequest对象
  xhr.open('GET', 'https://restapi.amap.com/v3/staticmap?' + params, true) // 打开GET请求，替换为您的后端API接口地址
  xhr.responseType = 'blob' // 设置返回数据的类型为Blob对象
  xhr.onload = function () {
    if (xhr.status === 200) {
      // 请求成功
      const blob = xhr.response // 获取Blob对象
      const url = URL.createObjectURL(blob) // 创建Blob对象的URL
      mapform.value.url = url
    } else {
      console.error('Request failed:', xhr.status)
    }
  }
  xhr.onerror = function () {
    console.error('Network error:', xhr.status)
  }
  xhr.send() // 发送请求
}

// 保存添加地址
const save = () => {
  if (mapform.value.address === '' || mapform.value.detailedAddress === '') {
    ElMessage.error('请填地址以及详细地址')
    return
  }
  if (mapform.value.location === '') {
    ElMessage.error('请进行定位确定当前位置是否正确')
    return
  }
  ElMessage({
    message: '地址创建成功',
    type: 'success'
  })
  mapVisible.value = false
}

onMounted(async () => {
  window.scrollTo(0, 0)
  // 查询用户是否被认证了，如果被认证了step=3
  const result = await http_company.isAuth(userStore.userInfo.userId)
  if (result.code === 200) {
    postsFormData.value.companyName = result.data.name
    step.value = 3
    const result1 = await http_posts.getCategoryList()
    if (result1.code === 200) {
      postsList.value = result1.data
    }
  }
})
</script>

<template>
  <div class="recruitmentInit-box">
    <div class="content">
      <div class="left">
        <img
          src="http://121.40.171.110:9000/client-material/recruitmentInit.png"
          style="width: 105%; margin-right: 20px"
        />
      </div>
      <div class="right">
        <el-popover placement="bottom" trigger="click">
          <template #reference>
            <div
              style="
                display: flex;
                position: absolute;
                right: 3%;
                cursor: pointer;
              "
            >
              <div>
                <span
                  style="
                    font-size: 12px;
                    color: #666;
                    display: inline-block;
                    margin-right: 10px;
                  "
                  >{{ userInfo.username }}</span
                >
              </div>
              <div>
                <el-avatar :size="30" :src="userInfo.avatarImage" />
              </div>
            </div>
          </template>
          <div @click="logout" class="aaa">
            <span
              class="iconfont icon-jinru"
              style="
                display: inline-block;
                margin-left: 15px;
                margin-right: 10px;
              "
            ></span>
            <span>退出登录</span>
          </div>
        </el-popover>
        <div v-if="step === 1">
          <div
            style="
              font-size: 22px;
              font-weight: 900;
              margin-top: 70px;
              margin-left: 60px;
            "
          >
            创建BOSS名片
          </div>
          <el-form
            style="margin-top: 70px"
            :model="formData"
            label-width="120px"
          >
            <el-form-item label="头像：">
              <div
                @click="showDialogForm"
                style="position: absolute; top: -30px; cursor: pointer"
              >
                <el-avatar :size="100" :src="userInfo.avatarImage" />
              </div>
            </el-form-item>
            <el-form-item label="姓名：" style="margin-top: 70px">
              <el-input
                disabled
                style="width: 80%"
                v-model="formData.username"
              />
            </el-form-item>
            <el-form-item label="职务：" style="margin-top: 30px">
              <el-input
                placeholder="真实的职务，更能赢得牛人信任"
                style="width: 80%"
                v-model="formData.duties"
              />
            </el-form-item>
          </el-form>
        </div>
        <div v-if="step === 2">
          <div
            style="
              font-size: 22px;
              font-weight: 900;
              margin-top: 70px;
              margin-left: 60px;
            "
          >
            完善公司信息
          </div>
          <el-form
            style="margin-top: 70px"
            :model="formData"
            label-width="120px"
          >
            <!-- TODO:完善es查询 -->
            <el-form-item label="我的公司：" style="margin-top: 30px">
              <el-autocomplete
                style="width: 80%"
                v-model="formData.company"
                :fetch-suggestions="querySearchAsync"
                clearable
                class="inline-input w-50"
                placeholder="请输入您所属公司营业执照上的公司名称"
              />
            </el-form-item>
          </el-form>
          <div style="color: #666; margin-left: 180px; line-height: 30px">
            <div>注意事项：</div>
            <div>1.请输入您所属公司营业执照上的公司名称</div>
            <div>2.请注意区分总公司和分公司</div>
            <div>3.公司名称将用于后续的企业认证使用，请确保准确性</div>
          </div>
        </div>
        <div v-if="step === 3">
          <div
            style="
              margin-top: 70px;
              margin-left: 60px;
              overflow-y: scroll;
              height: 500px;
            "
          >
            <div style="display: flex">
              <div>
                <span
                  style="color: #00bebd; font-size: 50px; font-weight: normal"
                  class="iconfont icon-1_round_solid"
                ></span>
              </div>
              <div>
                <div style="font-size: 20px">职位基本信息</div>
                <div style="font-size: 12px; color: #666; margin-top: 7px">
                  职位发布成功后，招聘类型、职位名称、职位类型、工作城市，将无法修改
                </div>
              </div>
            </div>
            <el-form
              style="margin-top: 70px"
              ref="postsForm"
              :rules="rules"
              :model="postsFormData"
              label-width="120px"
            >
              <el-form-item
                prop="companyName"
                label="公司："
                style="margin-top: 70px"
              >
                <el-input
                  disabled
                  style="width: 80%"
                  v-model="postsFormData.companyName"
                />
              </el-form-item>
              <el-form-item
                prop="postsType"
                label="招聘类型："
                style="margin-top: 30px"
              >
                <el-select
                  v-model="postsFormData.postsType"
                  class="m-2"
                  placeholder="选择招聘类型"
                >
                  <el-option
                    v-for="(item, index) in postsTypeList"
                    :key="index"
                    :label="item"
                    :value="index"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                prop="categoryId"
                label="职位类型："
                style="margin-top: 30px"
              >
                <el-cascader
                  placeholder="选择职位类型"
                  v-model="postsFormData.categoryId"
                  :options="postsList"
                  :props="props"
                />
              </el-form-item>
              <el-form-item
                prop="name"
                label="职位名称："
                style="margin-top: 30px"
              >
                <el-input
                  style="width: 80%"
                  placeholder="输入职位名称"
                  v-model="postsFormData.name"
                />
              </el-form-item>
              <el-form-item
                prop="description"
                label="职位描述："
                style="margin-top: 30px"
              >
                <div id="app">
                  <quill-editor
                    style="width: 500px; height: 400px"
                    theme="snow"
                    v-model:content="postsFormData.description"
                    contentType="html"
                  ></quill-editor>
                </div>
              </el-form-item>
            </el-form>
            <div style="display: flex; margin-top: 50px">
              <div>
                <span
                  style="color: #00bebd; font-size: 50px; font-weight: normal"
                  class="iconfont icon-2_round_solid"
                ></span>
              </div>
              <div>
                <div style="font-size: 20px">职位要求</div>
                <div style="font-size: 12px; color: #666; margin-top: 7px">
                  我们将通过以下条件，为您精确推荐合适的牛人，请尽量详细填写
                </div>
              </div>
            </div>
            <el-form
              style="margin-top: 70px"
              :model="postsFormData"
              label-width="120px"
            >
              <el-form-item label="经验和学历:" style="margin-top: 70px">
                <el-select
                  v-model="postsFormData.workExperience"
                  class="m-2"
                  placeholder="选择经验"
                  size="large"
                  style="width: 150px"
                >
                  <el-option
                    v-for="item in workExperience"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
                <el-select
                  v-model="postsFormData.academicQualifications"
                  class="m-2"
                  placeholder="选择学历"
                  size="large"
                  style="width: 150px; margin-left: 20px"
                >
                  <el-option
                    v-for="(item, index) in academicQualifications"
                    :key="index"
                    :label="item"
                    :value="index"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="薪资范围:">
                <el-select
                  v-model="postsFormData.min"
                  class="m-2"
                  placeholder="最低月薪"
                  size="large"
                  style="width: 150px"
                  @change="salaryChange"
                >
                  <el-option
                    v-for="item in minSalary"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
                <el-select
                  v-if="postsFormData.min !== ''"
                  v-model="postsFormData.max"
                  class="m-2"
                  placeholder="最高月薪"
                  size="large"
                  style="width: 150px; margin-left: 20px"
                >
                  <el-option
                    v-for="item in maxSalary"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
                <el-icon
                  v-if="postsFormData.min !== ''"
                  style="margin-left: 7px"
                  ><CloseBold
                /></el-icon>
                <el-select
                  v-if="postsFormData.min !== ''"
                  v-model="postsFormData.month"
                  class="m-2"
                  placeholder="领取月数"
                  size="large"
                  style="width: 150px; margin-left: 7px"
                >
                  <el-option
                    v-for="item in month"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="职位关键词:">
                <el-tag
                  v-for="tag in postsFormData.postsKey"
                  :key="tag"
                  class="mx-1"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)"
                  style="margin-right: 10px; margin-top: 10px"
                  round
                >
                  {{ tag }}
                </el-tag>
                <el-input
                  v-if="inputVisible"
                  ref="InputRef"
                  v-model="inputValue"
                  class="ml-1 w-20"
                  size="small"
                  @keyup.enter="handleInputConfirm"
                  @blur="handleInputConfirm"
                />
                <el-button
                  v-else
                  class="button-new-tag ml-1"
                  size="small"
                  style="margin-top: 10px"
                  @click="showInput"
                >
                  + 添加关键词
                </el-button>
              </el-form-item>
              <el-form-item label="工作地点:">
                <el-button @click="addAddress" type="success"
                  >获得当前地址</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div style="position: absolute; bottom: 60px; right: 140px">
          <el-button type="primary" @click="nextStep">下一步</el-button>
        </div>
      </div>
    </div>
  </div>
  <!-- 选择头像弹出层 -->
  <el-dialog v-model="dialogVisible" width="30%">
    <div>
      <b>默认头像 </b>
      <span>(上传真实头像，更能赢得牛人信任)</span>
    </div>
    <div class="default-list">
      <div
        @click="selectAvatar(item, index)"
        v-for="(item, index) in avatarList"
        :key="index"
        class="avatar"
      >
        <div
          v-show="avatarActive === index"
          style="
            background-color: rgba(83, 202, 195, 0.8);
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 999;
          "
        >
          <span class="iconfont icon-zhengque"></span>
        </div>
        <img :src="item" style="width: 100%; z-index: 0" />
      </div>
    </div>
    <el-button
      type="success"
      style="width: 80px; margin-top: 30px; margin-left: 150px"
      @click="selectDefaultAvatar"
      >确定</el-button
    >
    <el-divider />
    <div class="upload">
      <el-upload
        class="upload-demo"
        action="/api/v1/client/auth/uploadAvatar"
        :before-upload="beforeUpload"
      >
        <el-button
          plain
          type="primary"
          style="width: 150px; margin-left: 120px; margin-top: 10px"
          ><el-icon style="margin-right: 7px"><UploadFilled /></el-icon
          >上传头像</el-button
        >
        <template #tip>
          <div style="text-align: center" class="el-upload__tip">
            支持jpg、png、jpeg、bmp格式，小于10M
          </div>
        </template>
      </el-upload>
    </div>
  </el-dialog>
  <!-- 选择地址弹出层 -->
  <el-dialog v-model="mapVisible">
    <div style="font-size: 22px">添加地址</div>
    <el-form style="margin-top: 30px" :model="mapform" label-width="200px">
      <el-form-item label="地址">
        <el-input
          style="width: 400px"
          placeholder="请输入地址：省+市+区+目标建筑"
          v-model="mapform.address"
        />
        <span @click="setLocation" class="location">定位</span
        ><el-icon class="location" style="margin-left: 1px; font-size: 16px"
          ><MapLocation
        /></el-icon>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input
          style="width: 400px"
          placeholder="请输入详细地址：楼层+门牌号"
          v-model="mapform.detailedAddress"
        />
      </el-form-item>
    </el-form>
    <img
      v-if="mapform.url !== ''"
      style="margin-left: 60px"
      :src="mapform.url"
      alt="地图"
    />
    <div style="text-align: right; margin-right: 30px">
      <el-button @click="save" style="margin-top: 20px" type="success"
        >保存</el-button
      >
    </div>
  </el-dialog>
  <!-- 企业认证 -->
  <el-dialog
    :show-close="false"
    v-model="authVisivle"
    title="企业认证"
    width="50%"
    :before-close="authClose"
  >
    <div style="font-size: 16px">
      发布的职位已保存至草稿，当前用户还未被公司认证，请输入企业认证码进行认证。认证完成之后自动提交审核
    </div>
    <div style="font-size: 12px; color: #666; margin-top: 10px">
      如果不进行认证，职位只会保存在草稿箱中不能发布
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-input
          v-model="enterpriseAuthenticationCode"
          type="password"
          placeholder="请输入企业认证码"
          show-password
        />
        <el-button style="margin-top: 30px" @click="authClose" type="success"
          >认证</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.dialog-footer button:first-child {
  margin-right: 10px;
}
.default-list {
  display: flex;
  flex-wrap: wrap;
  .avatar {
    margin-left: 30px;
    margin-top: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    position: relative;
  }
  img {
    position: absolute;
    left: 0;
    top: 0;
  }
  .icon-zhengque {
    font-size: 30px;
    display: inline-block;
    margin-left: 16px;
    margin-top: 15px;
    color: white;
  }
}
.upload {
}

.aaa:hover {
  cursor: pointer;
  color: #409eff;
}
.recruitmentInit-box {
  width: 100%;
  height: 100vh;
  background-color: #00bebd;
  position: relative;
  .content {
    width: 78%;
    height: 95%;
    background-color: #fff;
    border-radius: 20px;
    margin: 0 auto;
    position: absolute;
    top: 2.5%;
    left: 11.5%;
    display: flex;
    overflow: hidden;
    .left {
      flex: 5;
      overflow: hidden;
    }
    .right {
      flex: 8;
      overflow: hidden;
      margin-top: 15px;
      margin-right: 30px;
    }
  }
}
.location {
  display: inline-block;
  margin-left: 10px;
  cursor: pointer;
  color: #409eff;
}
</style>
